<template>
	<!-- 发票抬头管理 -->
	<view class="invoice-main">
		<view class="invoice-list">
			<view class="invoice-item" v-for="(item, index) in invoiceList" :key="item.id">
				<view class="invoice-item-header">
					<uni-tag :text="item.type == 0 ? '个人发票' : '企业发票'" type="error" size="mini" />
				</view>
				
				<view class="invoice-item-content">
					<view class="invoiceItem">
						<view class="invoiceItem-label">
							开票人
						</view>
						<view class="invoiceItem-infos">
							{{item.name}}
						</view>
					</view>
					
					<view v-if="item.type == 1">
						<view class="invoiceItem">
							<view class="invoiceItem-label">
								单位税号
							</view>
							<view class="invoiceItem-infos">
								{{item.company_no}}
							</view>
						</view>
						
						<view class="invoiceItem">
							<view class="invoiceItem-label">
								单位地址
							</view>
							<view class="invoiceItem-infos">
								{{item.company_address}}
							</view>
						</view>
						
						
						<view class="invoiceItem">
							<view class="invoiceItem-label">
								单位电话
							</view>
							<view class="invoiceItem-infos">
								{{item.company_tel}}
							</view>
						</view>
						
						<view class="invoiceItem">
							<view class="invoiceItem-label">
								开户银行
							</view>
							<view class="invoiceItem-infos">
								{{item.company_bank}}
							</view>
						</view>
						
						<view class="invoiceItem">
							<view class="invoiceItem-label">
								银行账号
							</view>
							<view class="invoiceItem-infos">
								{{maskBankAccountRegexs(item.company_bank_no)}}
							</view>
						</view>
					</view>
					
					<view class="invoiceItem">
						<view class="invoiceItem-label">
							联系邮箱
						</view>
						<view class="invoiceItem-infos">
							{{item.email}}
						</view>
					</view>
					
					<view class="invoiceItem">
						<view class="invoiceItem-label">
							是否默认
						</view>
						<view class="invoiceItem-infos">
							<uni-tag text="默认" type="error" size="mini" v-if="item.default == '1'"/>
							<text v-else>非默认</text>
						</view>
					</view>
				</view>
				
				<view class="invoice-item-btn" @click="gotopath(`/pages/addInvoice/addInvoice?id=${item.id}`)">
					<view class="btn">
						编辑
					</view>
				</view>
			</view>
		</view>
		<view style="height: 160rpx;">
			
		</view>
		<view class="bankCard-btn" :style="bottomStyle">
			<view class="btn" @click="gotopath('/pages/addInvoice/addInvoice')">新增发票抬头</view>
		</view>
	</view>
</template>

<script>
import { userinvoice, userinvoiceSave } from '../../api/home/index.js';
import { maskBankAccountRegex } from '../../utils/tools.js';
export default {
	data() {
		return {
			invoiceList: []
		};
	},
	onShow() {
		this.getuserinvoice();
	},
	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '20rpx'}`;
		}
	},
	methods: {
		async getuserinvoice() {
			try {
				const resData = await userinvoice();
				this.invoiceList = resData.data;
			} catch (e) {
				throw Error(e);
			}
		},

		gotopath(path) {
			uni.navigateTo({
				url: path
			});
		},
		
		maskBankAccountRegexs(val){
			return maskBankAccountRegex(val)
		}
	}
};
</script>

<style>
	page{
		background-color: #f3f3f3;
	}
</style>

<style scoped lang="scss">
.invoice-main {
	.bankCard-btn {
		box-sizing: border-box;
		padding: 20rpx;
		padding-bottom: 0px;
		background-color: #fff;
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		.btn {
			background-color: #e43927;
			color: #fff;
			height: 80rpx;
			border-radius: 8px;
			line-height: 80rpx;
			text-align: center;
		}
	}
	
	.invoice-list{
		box-sizing: border-box;
		padding: 20rpx;
		.invoice-item{
			background-color: #fff;
			border-radius: 10px;
			box-sizing: border-box;
			padding: 20rpx;
			margin-bottom: 20rpx;
			.invoice-item-content{
				margin-top: 20rpx;
				.invoiceItem{
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #444;
					height: 50rpx;
					.invoiceItem-label{
						width: 140rpx;
						color: #999;
					}
				}
			}
		}
	}
	
	.invoice-item-btn{
		padding-top: 20rpx;
		border-top: 1px #f3f3f3 solid;
		display: flex;
		justify-content: flex-end;
		.btn{
			background-color: #f3f3f3;
			color: #444;
			padding: 10rpx 30rpx;
			font-size: 26rpx;
			border-radius: 8rpx;
		}
	}
}
</style>
